<!-- 会员中心 -->
<template>
  <div class="member-info">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="handleBack"
    />
    <!-- 会员信息 -->
    <div>
      <div class="member-img">
        <van-uploader :after-read="onRead">
          <img
            :src="headerImg"
            onerror="this.src='http://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/errorimg.png'"
          />
          <div class="mask"><i class="iconfont icon-cloudtouploadyunshangchuan" /></div>
        </van-uploader>
      </div>
      <van-field
        label="用户名"
        placeholder="请输入用户名"
        disabled
        :value="userName"
      />
      <van-field
        v-model="telephone"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="telephoneMsg"
        @blur="validateField"
      />
      <van-field
        v-model="area"
        label="地区"
        placeholder="请输入省/市/区"
      />
      <van-field
        v-model="detailAddress"
        label="详细地址"
        placeholder="街道门牌、楼层房间号等信息"
      />
      <van-field
        v-model="postal"
        label="邮政编码"
        placeholder="请输入邮政编码"
      />
      <van-button class="save-btn" type="primary" size="large" @click="updateMemberInfo">保存</van-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Toast } from 'vant';
import requestUrl from '../../serverApi';
export default {
  data () {
    return {
      userName: '',
      telephone: '',
      area: '',
      detailAddress: '',
      postal: '',
      userId: '',
      telephoneMsg: '',
      headerImg: '',
    };
  },
  created() {
    // 查询当前用户，获取用户userId
    this.getCurrentUser();
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    onRead(file) {
      // 大于1M，以字节为单位
      if (file.file.size > 1 * 1024 * 1024) {
        Toast.fail('请上传小于1M的图片');
        return;
      }
      // 使用base64格式
      this.headerImg = file.content;
    },
    validateField() {
      if (!this.telephone) {
      this.telephoneMsg = '请输入手机号';
        return;
      }
      this.telephoneMsg = '';
    },
    getCurrentUser() {
      const userName = JSON.parse(localStorage.userInfo).userName;
      const currentUserUrl = `${requestUrl.getCurrentUser}?userName=${userName}`
      axios.get(currentUserUrl).then((result) => {
        const data = result.data;
        if (data.code === 200 && data.message) {
          const userInfo = data.message;
          this.userName = userInfo.userName;
          this.telephone = userInfo.telephone;
          this.area = userInfo.area;
          this.detailAddress = userInfo.detailAddress;
          this.postal = userInfo.postal;
          this.headerImg = userInfo.headerImg,
          this.userId = userInfo._id;
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    updateMemberInfo() {
      if (!this.telephone) {
        this.telephoneMsg = '请输入手机号';
        return;
      }
      axios.put(requestUrl.saveMemberInfo, {
        telephone: this.telephone,
        area: this.area,
        detailAddress: this.detailAddress,
        postal: this.postal,
        userId: this.userId,
        headerImg: this.headerImg,
      }).then((result) => {
        if (result.data.code === 200) {
          Toast.success(result.data.message);
          this.$router.push({name: 'MemberCenter'});
        }
      }).catch((err) => {
        Toast.fail('保存失败');
      });
    }
  }
}

</script>
<style scoped>
  .member-info {
    background-color: #fff;
  }
  .member-img {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 20px auto;
    border-radius: 50%;
  }
  .member-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .save-btn {
    margin-top: 20px;
  }
  .mask {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    left: 0;
  }
  .mask > i {
    color: #fff;
  }
</style>
